<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>实时聊天工具</title>
    <style>
        /* 基础样式 */
        body { 
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        #chat-container {
            max-width: 600px;
            margin: 0 auto;
        }
        #messages {
            height: 400px;
            border: 1px solid #ccc;
            padding: 10px;
            overflow-y: scroll;
            margin-bottom: 10px;
        }
        .message {
            margin-bottom: 10px;
            padding: 8px;
            background: #f5f5f5;
            border-radius: 4px;
        }
        #input-area {
            display: flex;
        }
        #message-input {
            flex: 1;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            padding: 8px 16px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="chat-container">
        <div id="messages"></div>
        <div id="input-area">
            <input type="text" id="message-input" placeholder="输入消息...">
            <button onclick="sendMessage()">发送</button>
        </div>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();

        // 连接建立
        socket.on('connect', () => {
            console.log('Connected to server');
        });

        // 接收新消息
        socket.on('newMessage', (msg) => {
            const messagesDiv = document.getElementById('messages');
            const messageElement = document.createElement('div');
            messageElement.className = 'message';
            messageElement.innerHTML = `
                <strong>${msg.username}:</strong> ${msg.text}
                <span style="color: #666; font-size: 0.8em">${msg.timestamp.toLocaleTimeString()}</span>
            `;
            messagesDiv.appendChild(messageElement);
            
            // 自动滚动到底部
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
        });

        // 用户加入通知
        socket.on('userJoined', (user) => {
            const messagesDiv = document.getElementById('messages');
            const msgElement = document.createElement('div');
            msgElement.className = 'message system';
            msgElement.textContent = `${user.username} 加入了聊天室`;
            messagesDiv.appendChild(msgElement);
        });

        // 用户离开通知
        socket.on('userLeft', (userId) => {
            const username = Array.from(users.values())
                .find(u => u.id === userId)?.username || '用户';
            const messagesDiv = document.getElementById('messages');
            const msgElement = document.createElement('div');
            msgElement.className = 'message system';
            msgElement.textContent = `${username} 离开了聊天室`;
            messagesDiv.appendChild(msgElement);
        });

        // 发送消息
        function sendMessage() {
            const input = document.getElementById('message-input');
            const message = input.value.trim();
            if (message) {
                socket.emit('sendMessage', message);
                input.value = '';
            }
        }

        // 回车发送
        document.getElementById('message-input').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendMessage();
        });
    </script>
</body>
</html>